<template>
  <NuxtLayout name="content">
    <div class="home">
      <div class="content">
        <n-space vertical justify="center" :wrap="false">
          <template v-for="(item, index) in blockPostList" :key="index">
            <Block :width="pageInfo.isMini ? 100 : 144" :height="pageInfo.isMini ? 100 : 144" :tags="item.tags"
              :title="item.title" :summary="item.summary" :image="item.image" :time="item.time" :id="item.id" />
          </template>
        </n-space>
        <n-pagination v-model:page="pageNum" :page-size="pageSize" @update:page="onUpdatePage" size="large"
          :item-count="itemCount" />
      </div>
      <n-space class="right" vertical>
        <div class="slogan bg-fff padding-20 border-radius-5">
          <span class="box-title">每日一言</span>
          <div class="mt-10">
            {{ hitokot?.hitokoto }}——{{ hitokot?.from }}:{{ hitokot?.from_who }}
          </div>
        </div>
        <div class="record bg-fff padding-20 border-radius-5">
          <n-space justify="space-around">
            <template v-for="(item, index) in infoList" :key="index">
              <div class="recordItem">
                <p class="title">{{ item.title }}</p>
                <p class="count">{{ item.count }}</p>
              </div>
            </template>
          </n-space>
        </div>
        <div class="label bg-fff padding-20 border-radius-5">
          <span class="box-title">标签</span>
          <div class="flex flex-wrap margin-top-10">
            <template v-for="(item, index) in tagsList" :key="index">
              <n-button text class="padding-8-12">{{ item.name }}</n-button>
            </template>
          </div>
        </div>
        <div class="information bg-fff padding-20 border-radius-5">
          <span class="box-title">站点信息</span>
          <div class="flex flex-justify-space-between mt-10">
            <span>已运行时间</span>
            <span>{{ time }} 天</span>
          </div>
        </div>
      </n-space>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import { NSpace, NPagination, NButton } from "naive-ui";
import {
  findAll as apiPostFind,
  StatusPost,
  type PostQueryFind,
} from "../../api/post";
import { findAll as apiSiteGet } from "../../api/site";
import { findAll as apiFindAllTags, type TagsShow } from "../../api/tag";
import { getHitokot, type hitokotType } from "~/api/auth";
import pageInfoStore from "~/stores/pageInfo"
const pageInfo = pageInfoStore();
useHead({
  title: "首页", //网站标题
});
const time = String(
  (new Date().getTime() - 1702371546775) / (24 * 60 * 60 * 1000)
).split(".")[0];
const pageNum = ref(1);
const itemCount = ref(0);
const pageSize = ref(10);

interface blockPost {
  id: string;
  title: string;
  summary: string;
  image: string;
  tags: { id: Number; name: string }[];
  time: Date;
}
const blockPostList = ref<blockPost[]>();
const getPostList = async (data?: PostQueryFind) => {
  const res = await apiPostFind({ ...data });
  const list: blockPost[] = [];
  if (res?.data) {
    itemCount.value = res.data.count;
    res.data.list.forEach((item) => {
      list.push({
        id: item.id,
        title: item.title,
        summary: item.summary,
        image: item.coverUrl,
        tags: item.tags.map((tag) => {
          return { id: tag.id, name: tag.name };
        }),
        time: new Date(item.createTime),
      });
    });
  }
  blockPostList.value = list;
};
const onUpdatePage = (page: number) => {
  getPostList({ pageNum: page });
};
const infoList = ref<
  {
    title: string;
    count: number;
  }[]
>([]);
const getInfoSite = async () => {
  const res = await apiSiteGet();
  if (res) {
    infoList.value.push({
      title: "文章",
      count: res.data.postsCount,
    });
    infoList.value.push({
      title: "分类",
      count: res.data.categoryCount,
    });
    infoList.value.push({
      title: "标签",
      count: res.data.tagCount,
    });
  }
};
const tagsList = ref<TagsShow[]>([]);
const getTags = async () => {
  const res = await apiFindAllTags();
  if (res?.data) {
    res.data.forEach((item) => {
      tagsList.value.push({
        id: item.id,
        name: item.name,
      });
    });
  }
};

const hitokot = ref<hitokotType>();
const getSlogan = async () => {
  await nextTick();
  const res = await getHitokot();
  if (res.data.value) hitokot.value = res.data.value;
};
await Promise.all([
  getPostList(),
  getInfoSite(),
  getTags(),
  getSlogan(),
])
</script>
<style lang="scss" scoped>
.home {
  display: flex;


  .content {
    flex: 4;
    margin-right: 5%;
    max-width: 100vw;
  }

  .right {
    flex: 1.5;
  }
}

.recordItem {
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-weight: 700;
  }
}

.n-pagination {
  justify-content: center;
}

@media (max-width: 768px) {
  .home {
    flex-direction: column-reverse;
    align-items: center;

    .content {
      margin: unset;
      margin-top: 5%;
    }
  }
}
</style>
